<template>
  <div>
    <!-- 查询 -->
    <div class="search">
      <a-row style="align-items: center; margin-bottom: 20px" :gutter="20">
        <a-col :span="3" :offset="1">
          <span style="font-weight: bolder; font-size: 20px">订单状态:</span>
        </a-col>
        <a-col
          :span="2"
          v-for="(item, index) in statusList"
          class="order"
          :class="index == orderStatusAct ? 'order-act main-font-color' : ''"
          @click="chooseOrderStatus(item.status, index)"
          :key="item.status"
          >{{ item.title }}</a-col
        >
      </a-row>
      <a-form ref="formRef" :model="form" :hideRequiredMark="true" :label-col="labelCol">
        <a-row :gutter="10">
          <a-col :span="4">
            <a-form-item label="订单号">
              <a-input v-model:value="form.number" placeholder="请输入订单号"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="用户ID">
              <a-input v-model:value="form.userId" placeholder="请输入用户ID"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="用户姓名">
              <a-input v-model:value="form.name" placeholder="请输入用户姓名"></a-input>
            </a-form-item>
          </a-col>
          <!-- <a-col :span="4">
            <a-form-item label="耗材名称">
              <a-input
                v-model:value="form.number"
                placeholder="请输入耗材名称"
              ></a-input>
            </a-form-item>
          </a-col> -->
          <!-- <a-col :span="4">
            <a-form-item name="status" label="订单状态">
              <a-select
                ref="select"
                v-model:value="form.status"
                @focus="focus"
                @change="handleChange"
                placeholder=""
              >
                <a-select-option
                  v-for="item in statusList"
                  :value="item.name"
                  :key="item.id"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col> -->
          <a-col :span="6">
            <a-form-item label="下单时间">
              <a-range-picker v-model:value="time" @change="selectTime" format="YYYY-MM-DD HH:mm:ss" />
            </a-form-item>
          </a-col>
          <a-col :span="2">
            <a-button type="primary" @click="search" class="d-a-center">搜索</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table :columns="colums" :data-source="list" bordered :loading="loading" :pagination="pagination" @change="handleTableChange">
      <!-- 订单状态显示 -->
      <!-- 订单状态显示 -->
      <template #status="{ record }">
        <!-- :style="'color' + orderListStatusColor(record.status)" -->
        <div>
          <a-tag :color="orderListStatusColor(record.status)">{{ orderListStatus(record.status) }}</a-tag>
        </div>
      </template>
      <template #operation="{ record }">
        <a-button type="link" @click="look(record.key, record.status, 1)" v-has="{ a: $route, b: 1 }">查看</a-button>
        <a-button
          v-if="record.status == 1 || record.status == 2"
          type="link"
          @click="deal(record.key, record.status, 1)"
          v-has="{ a: $route, b: 2 }"
          >处理</a-button
        >
      </template>
    </a-table>

    <!-- 耗材订单详情 -->
    <a-modal :visible="visible" title="耗材订单" @cancel="closeModal" width="70%">
      <a-descriptions title="" bordered :column="2">
        <a-descriptions-item label="订单状态">
          <a-tag :color="orderListStatusColor(order.status)">{{ orderListStatus(order.status) }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="订单号">
          {{ order.number }}
        </a-descriptions-item>
        <a-descriptions-item label="下单时间">{{ order.createdAt }}</a-descriptions-item>
        <a-descriptions-item label="用户ID">{{ order.userId }}</a-descriptions-item>
        <a-descriptions-item label="耗材名称">{{ order.bagName }}</a-descriptions-item>
        <a-descriptions-item label="购买数量">{{ order.num }}</a-descriptions-item>
        <a-descriptions-item label="耗材明细">
          <div v-for="item in order.list" :key="item.id">
            <div>
              {{ item.bleName }}
            </div>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="支付金额">{{ order.price }}</a-descriptions-item>
        <a-descriptions-item v-if="order.realPrice" label="实际退款金额">{{ order.realPrice }}</a-descriptions-item>
      </a-descriptions>

      <template #footer>
        <div style="padding: 20px 0px">
          <a-row>
            <!-- <a-col :span="4" :offset="4" v-if="order.status == 1">
              <a-button type="danger" @click="cancleOrder">取消订单</a-button>
            </a-col> -->
            <a-col :span="4" :offset="4" v-if="order.status == 2">
              <a-button type="danger" @click="refund">退款</a-button>
            </a-col>
            <a-col :span="4" :offset="isEdit ? 8 : 2">
              <a-button type="primary" @click="closeModal">关闭</a-button>
            </a-col>
          </a-row>
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script>
import { reactive, ref, watch, computed, defineComponent, createVNode, toRefs } from 'vue'
import {
  CheckOutlined,
  EditOutlined,
  ArrowDownOutlined,
  ArrowUpOutlined,
  ExclamationCircleOutlined,
  EditTwoTone,
  DeleteTwoTone
} from '@ant-design/icons-vue'
import { Modal, message } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import { selectAllOrder, selectBagOrderByNumber, adminCancelOrder } from '@/api/consume/index'
import { useModal } from '@/hooks'
import { deleteObjBlank } from '@/assets/js/common.js'
export default {
  setup() {
    const data = reactive({
      loading: true,
      formRef: '',
      visible: false,
      isEdit: false,
      orderStatusAct: 0,
      list: [],
      time: [],
      order: {}
    })
    const form = reactive({
      // number: "",
      // userId: "",
      // startTime: "",
      // endTime: "",
    })

    // const data = reactive({ type: 0, isEdit: "" }); //弹窗值
    const router = useRouter()
    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0
    })
    // 状态列表
    const statusList = reactive([
      { title: '全部', status: '' },
      { title: '待付款', status: 0 },
      { title: '待送达', status: 1 },
      { title: '已送达', status: 3 },
      { title: '已退款', status: 4 }
    ])

    const colums = [
      {
        title: '订单号',
        dataIndex: 'number',
        className: 'table',
        width: 150,
        fixed: 'left'
      },
      {
        title: '用户ID ',
        dataIndex: 'userId',
        className: 'table',
        slots: {
          customRender: 'sort'
        }
      },
      {
        title: '用户姓名',
        dataIndex: 'userName',
        className: 'table'
      },
      {
        title: '耗材名称',
        dataIndex: 'bagName',
        className: 'table'
        // sorter: (a, b) => a.price - b.price,
      },
      {
        title: '购买数量',
        dataIndex: 'num',
        className: 'table'
      },
      {
        title: '支付金额',
        dataIndex: 'price',
        className: 'table'
      },
      {
        title: '订单状态',
        dataIndex: 'status',
        className: 'table',
        slots: {
          customRender: 'status'
        }
      },
      {
        title: '下单时间',
        dataIndex: 'createdAt',
        className: 'table',
        sorter: (a, b) => a.createdAt - b.createdAt
      },

      {
        title: '操作',
        dataIndex: 'operation',
        className: 'table',
        fixed: 'right',
        width: 100,
        slots: {
          customRender: 'operation'
        }
      }
    ]
    // 订单列表对应的状态
    const orderListStatusColor = computed(status => {
      return function (status) {
        if (status == 7) {
          return 'default'
        }
        if (status == 5) {
          return 'default'
        }
        if (status == 2) {
          return '#f50'
        }
        if (status == 3) {
          return 'success'
        }
        if (status == 6) {
          return 'error'
        }
        if (status == 1) {
          return '#f50'
        }
        if (status == 0) {
          return 'warning'
        }
      }
    })
    const orderListStatus = status => {
      let title = ''
      switch (status) {
        case 0:
          title = '待付款'
          break
        case 1:
          title = '待送达' //待配送
          break
        case 2:
          title = '待送达' //已接单
          break
        case 3:
          title = '已送达'
          break
        case 4:
          title = '已退款'
          break
        case 5:
          title = '已取消'
          break
        case 6:
          title = '退款中' //退款中
          break
        case 7:
          title = '已拒绝'
          break
      }
      return title
    }

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ['10', '20', '30'],
      showTotal: (total, range) => {
        return '共' + total + '条'
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true
    }))

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, '当前分页')
      page.current = pagination.current
      page.pageSize = pagination.pageSize

      // 请求列表接口
      init()
    }
    // 选择订单状态查询
    const chooseOrderStatus = (status, index) => {
      data.orderStatusAct = index
      page.current = 1
      form.status = status
      data.loading = true
      init()
    }
    const selectTime = (e, dateString) => {
      form.startTime = dateString[0]
      form.endTime = dateString[1]
    }
    const closeModal = () => {
      data.visible = false
    }
    const refund = () => {
      const { closeModal } = useModal.confirm({
        title: '确定退款当前耗材吗?',
        icon: createVNode(ExclamationCircleOutlined),
        content: '点击确定后，退款金额将原路退还到用户账户。',
        onOk: async () => {
          let res = await adminCancelOrder(data.order.number)
          if (res.success) {
            message.success('退款成功')
            data.visible = false
            init()
            closeModal()
          } else {
            message.error('退款失败了!!!')
          }
        }
      })
    }
    const search = () => {
      if (Object.keys(form).length == 0) {
        message.warning('请输入你要搜索的内容！！！')
        return
      }
      console.log(form, '表单内容是')
      // deleteObjBlank(form);
      data.loading = true
      init()
    }
    // 查看
    const look = (key, status) => {
      data.isEdit = true
      data.visible = true
      initDetail(key, status)
    }

    // 处理
    const deal = (key, status) => {
      data.isEdit = false
      data.visible = true
      initDetail(key, status)
    }
    init()
    async function init() {
      let obj = {
        pageNum: page.current,
        pageSize: page.pageSize,
        ...form //上下架状态
      }
      let res = await selectAllOrder(obj)
      if (res.success) {
        res.object.list.map(el => (el.key = el.number))
        data.list = res.object.list

        page.total = res.object.total
      }
      console.log(data.list, '耗材订单列表是')
      data.loading = false
    }
    async function initDetail(number, status) {
      let res = await selectBagOrderByNumber(number, status)
      if (res.success) {
        data.order = res.object
      }
    }

    return {
      ...toRefs(data),
      colums,
      pagination,
      data,
      handleTableChange,
      look,
      deal,
      labelCol: { style: { fontWeight: 'bolder', width: '100px' } },
      statusList,
      closeModal,
      refund,
      chooseOrderStatus,
      orderListStatus,
      orderListStatusColor,
      search,
      selectTime,
      form
    }
  },

  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    EditTwoTone,
    DeleteTwoTone,
    ArrowUpOutlined,
    ArrowDownOutlined
  }
}
</script>

<style scoped lang="less">
.search {
  background-color: #e6e6e6;
  margin-bottom: 20px;
  padding-top: 10px;
}
.order {
  // padding: 5px 0px;
  text-align: center;
  font-size: 1.25rem;
}
.order-act {
  width: 70%;
  padding: 2px 0px 2px 0;
  // font-size: 16px;
  font-size: 1.25rem;
  background-color: #2a9d8f;
  color: #fff;
  border-radius: 20rem;
}
</style>
